<template>
  <div id="mapDiv"></div>
</template>

<script>
const jsonData = require("./610428.json");
import * as echarts from "echarts";
import { pointImg } from "./img.js";
import "echarts-gl";
export default {
  props: ["compenyData"],
  data() {
    return {
      map: null,
      hookToolTip: {},
      imgurl: require("../assets/tipbutton.png"),
      customerBatteryCityData: [],
      myChart: null,
      index: 0, //开始下标
      interval: 3000, // 时间间隔毫秒数
      timer: null,
      nameData: [],
    };
  },
  watch: {
    hookToolTip: function (name) {
      document.querySelector("#btn-tooltip").addEventListener("click", (e) => {
        this.$emit("digChange", e.target.dataset.query);
      });
    },
    compenyData: {
      handler(newValue) {
        let data = newValue;
        data.forEach((v) => {
          v.fruitProd = JSON.parse(v.fruitProd);
          if (v.fruitProd && v.fruitProd.coordinate) {
            this.customerBatteryCityData.push(v);
          }
        });
        this.initTdtMap();
        this.setIntervalMyChart();
        // 鼠标划入
        this.mouseEvents();
      },
      // immediate:true
    },
  },
  methods: {
    initTdtMap() {
      this.myChart = echarts.getInstanceByDom(
        document.getElementById("mapDiv")
      );
      if (this.myChart == undefined) {
        this.myChart = echarts.init(document.getElementById("mapDiv"));
      }
      this.myChart.clear();
      echarts.registerMap("长武县", jsonData);
      this.nameData = jsonData.features.map((item) => {
        return {
          name: item.properties.name,
        };
      });
      var img2 = pointImg;
      let option = {
        tooltip: {
          trigger: "item",
          triggerOn: "click",
          className: "custom-tooltip",
          appendToBody: true,
          enterable: true,
          confine: false,
          formatter: (item) => {
            if (item.componentSubType != "scatter") return;
            this.hookToolTip = item;
            var tipHtml =
              `<div style='margin:.28rem 0 0 .35rem;color:#fff;'>` +
              `<p style='display:flex;justify-content: space-between;font-size: 18px;font-weight: 600;'><span>${item.data[2].name}</span><img style='width:20px;height:20px;margin-right:80px;' src='${item.data[2].logoImg}' /></p>` +
              `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:16px;'>产业园地址：` +
              item.data[2].address +
              "</span>" +
              `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园负责人：` +
              item.data[2].operateName +
              "</span>" +
              `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产量：` +
              item.data[2].fruitProd.prodNum +
              "万吨</span>" +
              `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产值：` +
              item.data[2].fruitProd.prodVal +
              "亿元</span>" +
              `<div class='utlto'  id='btn-tooltip' data-query='${item.data[2].fruitProd.url}'>跳转果园</div>` +
              "</div>";
            return tipHtml;
          },
        },
        geo: [
          {
            map: "长武县",
            name: "顶部",
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            show: true,
            roam: false,
            silent: true,
            emphasis: {
              show: false,
            },
            select: {
              itemStyle: {
                color: "red", // 设置地图点击后的颜色
                areaColor: "rgba(123, 255, 222, 1)",
              },
            },
            regions: [
              {
                // 设置点击后高亮
                name: this.selectName, // 高亮的省份
                itemStyle: {
                  areaColor: "red", // 区域颜色
                },
              },
            ],
            itemStyle: {
              borderColor: "#21A880",
              borderWidth: 2,
              shadowColor: "#21A880",
              shadowOffsetY: 10,
              shadowBlur: 140,
              areaColor: "transparent",
            },
          },
          // 重影
          {
            type: "map",
            map: "长武县",
            zlevel: -1,
            aspectScale: 1,
            animation: false,
            zoom: 0.65,
            layoutCenter: ["50%", "51%"],
            layoutSize: "120%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(17, 149, 216,0.6)",
              shadowColor: "rgba(172, 122, 255,0.5)",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "rgba(5,21,35,0.1)",
            },
          },
          {
            type: "map",
            map: "长武县",
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "52%"],
            layoutSize: "120%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "rgba(58,149,253,0.6)",
              shadowColor: "#21A880",
              shadowOffsetY: 5,
              shadowBlur: 15,
              areaColor: "transpercent",
            },
          },
          {
            type: "map",
            map: "长武县",
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "53%"],
            layoutSize: "120%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              borderColor: "#21A880",
              shadowColor: "#21A880",
              shadowOffsetY: 15,
              shadowBlur: 10,
              areaColor: "transpercent",
            },
          },
          {
            type: "map",
            map: "长武县",
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "54%"],
            layoutSize: "120%",
            roam: false,
            silent: true,
            itemStyle: {
              borderWidth: 1,
              // borderColor: "rgba(11, 43, 97,0.8)",
              borderColor: "#21A880",
              shadowColor: "rgba(123, 255, 222, .1)",
              shadowOffsetY: 15,
              shadowBlur: 5,
              areaColor: "rgba(123, 255, 222, .1)",
            },
          },
        ],
        series: [
          // map
          {
            name: "长武",
            type: "map",
            map: "长武县", // 自定义扩展图表类型
            aspectScale: 1,
            zoom: 0.65, // 缩放
            showLegendSymbol: true,
            label: {
              show: true,
              color: "#E0D525",
              fontSize: "120%",
              fontWeight: "600",
            },
            itemStyle: {
              areaColor: {
                type: "linear",
                x: 1200,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(63,84,79,0.1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(63,84,79,1)", // 50% 处的颜色
                  },
                ],
                global: true, // 缺省为 false
              },
              borderColor: "#7BFFDD",
              borderWidth: 3,
              shadowColor: "rgba(123,255,221,1)",
              shadowBlur: 15,
            },
            emphasis: {
              // 当鼠标放上
              label: {
                color: "#fff",
              },
              itemStyle: {
                borderWidth: 2,
                borderColor: "#F6FD9C",
                areaColor: "#E0D525",
              },
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            data: this.nameData,
          },
          // 柱状体的顶部
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: true,
              formatter: function (params) {
                var name = params.data[2].abbreviation;
                var text = `{fline|${name}}`;
                return text;
              },
              rich: {
                fline: {
                  color: "rgba(255, 228, 50, 1)",
                  fontSize: 14,
                  padding: [-47, 0, 0, 0],
                  fontFamily: "sans-serif",
                  fontWeight: 400,
                  textAlign: "center",
                },
              },
            },
            itemStyle: {
              color: "#00FFF6",
              opacity: 1,
            },
            symbol: img2,
            symbolSize: [100, 100],
            symbolOffset: [0, 0],
            z: -1,
            data: this.scatterData(),
          },
        ],
      };
      this.myChart.setOption(option, true);
      this.myChart.off("click"); // 为了不触发两次
      this.myChart.on("click", (e) => {
        if (e.componentSubType != "map") return;
        this.$emit("tipChange", e.data);
        console.log(e.data);
      });
    //   -----
    },
    // point
    scatterData() {
      return this.customerBatteryCityData.map((item) => {
        return [
          Number(item.fruitProd.coordinate.lng),
          Number(item.fruitProd.coordinate.lat),
          item,
        ];
      });
    },
    // 设置轮播
    setIntervalMyChart() {
      this.dispatchActionChart("highlight", this.index);
      const dataLength = this.nameData.length;
      // 每隔 interval 进行一次切换
      this.timer = setInterval(() => {
        // 清除高亮跟提示
        this.dispatchActionChart("downplay", this.index);
        this.$emit(
          "tipChange",
          this.nameData[this.index == -1 ? 0 : this.index]
        );
        // 索引增加
        this.index++;
        // 激活高亮跟提示
        this.dispatchActionChart("highlight", this.index);
        this.$emit("tipChange", this.nameData[this.index]);
        if (this.index === dataLength - 1) {
          // 需要对最后一个进行清除，对第一个进行激活
          let tempTimer = setTimeout(() => {
            this.dispatchActionChart("downplay", dataLength - 1);
            this.$emit("tipChange", this.nameData[0]);
            clearTimeout(tempTimer);
          }, this.interval);
          this.index = -1;
        }
      }, this.interval);
    },
    // 鼠标划入
    mouseEvents() {
      this.myChart.on("mouseover", () => {
        // 停止定时器，清除之前的高亮
        clearInterval(this.timer);
        this.dispatchActionChart("downplay", this.index);
      });
      // 鼠标划出重新定时器开始
      this.myChart.on("mouseout", () => {
        clearInterval(this.timer);
        // 启动轮播
        this.setIntervalMyChart();
      });
    },
    /**
     * @description 控制高亮跟提示
     * @param {String} type （highlight：高亮（反：downplay）；showTip：显示提示（反：hideTip））
     * @param {Number} dataIndex 数据项的 index
     * */
    //高亮
    dispatchActionChart(type, dataIndex) {
      this.myChart.dispatchAction({
        type: type,
        seriesIndex: 0,
        dataIndex: dataIndex,
      });
    },
  },
};
</script>
<style lang="less" scoped>
#mapDiv {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>

<style>
.custom-tooltip {
  padding: 0 !important;
  border: none !important;
  display: none;
  background-color: transparent !important;
  top: 0;
  left: 0;
  width: 400px;
  height: 305px;
  background-image: url("../assets/tooltip-bgc.png");
  background-size: 100% 100%;
  z-index: 999999;
  .utlto {
    width: 88px;
    height: 33px;
    background: url("../assets/tipbutton.png");
    background-size: cover;
    position: absolute;
    right: 40px;
    bottom: 60px;
    text-align: center;
    line-height: 33px;
    cursor: pointer;
  }
}
</style>
